Mixpanelのご紹介＆WebサイトからMixpanelにイベントデータを送ってみた
こんにちは、アライアンス統括部エンジニアグループサービスチームのまつおかです！
Mixpanelについて
みなさま「Mixpanel」という分析ツールはご存知でしょうか。
Mixpanel はWebサイトやアプリでのユーザーの行動情報を収集し、分析できるツールです。
オンライン時代の今、ユーザーの行動やプロダクトを分析することは、コンバージョンやエンゲージメント、リテンションを高める上で欠かせないものとなっています。
分析対象となるリアルタイムの詳細なユーザーの行動データを収集し、セルフサービスでより簡単に分析することのできるツールが Mixpanel なのです。
- コンバージョン：購入や、資料請求、会員登録など、利益につながるユーザの行動のこと
- エンゲージメント：企業や商品・ブランドなどと顧客との間で良好かつ継続的な関係を構築すること
- リテンション：既存顧客との関係を維持し利益確保していくためのマーケティング活動のこと
Mixpanel は数多くのサービスとシームレスな連携が可能ですので、現在利用している製品とも簡単に連携できる可能性が高いことも大きな魅力のひとつです。
AWS や Fivetran、Snowflake、また、マーケティングプラットフォームの Braze など、クラスメソッドで支援可能な製品との連携も可能です。
そんなMixpanelですが、分析するにはまずはユーザーの行動データを取り込むところから始めることになります。
SnowflakeやGoogle BigQueryなどのデータウェアハウス、Amazon S3やGoogle Cloud Storageなどのクラウドストレージ、その他CDP（カスタマーデータプラットフォーム）などと連携したり、Webサイトやアプリに Mixpanel SDK を埋め込んでデータを収集することができます。
今日はその中でもWebサイトに Mixpanel SDK を埋め込んでイベントやユーザの情報を取り込む方法を試してみましたので、そちらの手順をご紹介したいと思います。
ちなみに、Googleタグマネージャーを使って Mixpanel SDK を実装することもできます。詳しくはこちらをご覧ください。
Webサイトに Mixpanel SDK 埋め込んでイベントデータ送信してみた
前提として、（大きな声で言うことでもないですが）私自身が「SDKを埋め込む」という体験が初めてであるということをお伝えしておきます。HTMLについても基本的な知識程度です。
そんな今回の実装は Mixpanel のドキュメントと社内の有識者にアドバイスもらってやってみましたが、どこにどのようなものをどう書けばいいのかがわかればなんとかなります！（ということを実感したので、抵抗ある方もぜひチャレンジしてみてくださいー！）
SDKを埋め込む対象となるページは独自に用意したWebページです。ローカルで実行するだけでデータは連携できますので、ページをどこかのサーバーにアップしないといけないなどもありません。まず試すだけであれば「Hello World!」のみのページひとつでOKです。
プロジェクトトークンの取得
データを連携するMixpanel側のプロジェクトは事前に用意されていることを前提としています。
まずは連携対象プロジェクトのトークンを取得しておきます。
プロジェクトの右上、設定ギアからProject Settingsを選択します。
OverviewページのAccess Keysのところにある「Project Token」が今回必要となるトークンですので、コピーしておいてください。
ライブラリの初期化とイベント送信
ここからHTMLで書かれたWebページ側の設定になります。
最初にMixpanel JavaScriptのライブラリを初期化します。
Mixpanelのガイドページ に書いてあるスニペットをコピーして <HEAD> タグの中に貼り付けます。
<script type="text/javascript">
(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d=function(){call2_args=arguments;call2=.concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
// Enabling the debug mode flag is useful during implementation,
// but it's recommended you remove it for production
mixpanel.init('YOUR_TOKEN', {debug: true});
mixpanel.track('Sign up');
</script>
- 8行目：
「'YOUR_TOKEN'」の部分は先程取得したプロジェクトトークンに置き換えてください（シングルコーテーションで囲う）。 -
9行目：
イベントデータを送信しています。「'Sign up'」の部分がイベント名になりますので、「ボタンクリック」や「商品購入」など適切なイベント名を設定してください（日本語可）。詳細は後ほど説明します。
送信データ確認
ガイドページにあるコードを貼り付けてトークンを書き換えただけですが、もうイベントデータが送信される状態（上記コードの9行目）になっていますので、とりあえず正常に送れているかどうかを確認してみます。
HTMLファイルを保存したら、一度ブラウザで開いてください。
その後、MixpanelのEventsページを開いてみると・・・
Event Nameに「Sign up」と入っているデータがありますね。これがページを開いた時に送信されたイベントデータです。正常に送れたことが確認できましたー！ウレシイ。。。
mixpanel.track
イベントデータの送信時に呼び出したmixpanel.trackについて、特によく使われる関数ですので詳しく見ておきます。
mixpanel.trackの必須のパラメータはイベント名だけなのですが、それ以外にデフォルトでいくつかのプロパティが自動で付加されます。それがこれらの項目です。
実行した国や地域、URL、デバイス、ブラウザなどなど。詳細はこちら→Default Properties Collected をご確認ください。
また、この項目以外に独自で送りたいプロパティを設定することも可能です。
例えば、商品を購入したタイミングであれば商品名やサイズ、柄など。そんな場合はこんな感じで書きます。
mixpanel.track('購入', {
'商品': '靴下',
'サイズ': 5,
'柄': 'はたペンギン'
});
「購入」がイベント名、「商品」「サイズ」「柄」がプロパティ、'：'のあとがに続くものがそれぞれの値です。
Mixpanel側でプロパティを事前に定義しておく必要はなく、新規で送られたプロパティは自動で追加されます。また、独自に追加したプロパティは「Your Properties」で確認できます。
プロパティには String、Numeric、Boolean、Date、Listの5つのデータ型を使用することができます。
mixpanel.identify
Mixpanel では、ユーザーを識別するために「Distinct ID」というIDを自動で付与しています。特に指定がない限りはこのIDでユーザーを識別することになるのですが、同じユーザーでも異なるブラウザやアプリなどから利用した場合は同一ユーザーとして追跡していくことが難しくなりますので、ログインして利用するサイトなどでは mixpanel.identify を呼び出してユーザーをユニークに管理しているIDを設定し、異なるデバイスでも同じユーザーとして分析できるようにします。
mixpanel.identify('USER_ID');
Mixpanel にすでに連携されているユーザーの場合、ユーザーのプロパティなどこのあと送信されるユーザー情報は更新、まだ存在しないユーザーの場合は自動で新規登録されます。
mixpanel.people.set
mixpanel.identify でユーザーを識別できる状態になったあとは mixpanel.people.set を呼び出すことでユーザーのプロパティを設定することが可能になります。
mixpanel.people.set({
'$name': 'bonbonbon',
'Favorite': 'beer',
'Update': new Date()
});
プロパティの記載方法や設定可能なデータ型はmixpanel.trackと同じです。
また、プロパティ名の頭に$のついているものは予約語と言われる Mixpanel側でデフォルトで用意されているプロパティです。該当するものあればそれを利用し、ないものは新規で追加するのが良いかと思います。
MixpanelのUsersページを開いてみるとデータが連携できていることがわかります！
さいごに
さてさて、これで最低限必要そうなデータの取得ができそうです。
あとはリファレンスを見ながら応用しながらユーザー解析に必要なコードを追加し、Mixpanel側で分析していこうと思います。
